<template>
  <div id="main">
    <ul>
      <li v-for="(value,key,index) in userinfo" :key="index">
        <div class="headimg">
          <img :src="value.userimg" alt />
        </div>
        <div class="userinfo">
          <p class="uesrname">{{value.username}}</p>
          <p class="usertext">{{value.usertext}}</p>
          <div class="viewthings">
            <span class="date-and-time">{{value.date}}&nbsp;{{value.time}}</span>
            <div>
              <div class="goodimg" @touchstart="addgood"></div>
              <div class="addgoodbtn" v-if="isshow">
                <p>
                  <button @touchstart="changered">已登录</button>
                </p>
                <p>
                  <button @touchstart="gologin">未登录</button>
                </p>
              </div>
              <span :class="{rednum:isred}">{{value.goodnum}}</span>
              <img src="@/assets/书城/u2494.png" alt />
              <span>{{value.recommendnum}}</span>
            </div>
          </div>
        </div>
        <img class="line" src="@/assets/书城/分割线_u3221.png" />
      </li>
    </ul>
    <div class="bottombox"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isred: false,
      isshow: false,
      userinfo: {
        userinfo1: {
          userimg: require("@/assets/书城/用户头像_u2484.png"),
          username: "西瓜",
          usertext:
            "我们知道自己在重复相同的痛苦，只是愈来愈深，但可知无数次的重复也让痛苦变得可笑？重复人类生命吗？",
          goodnum: "330",
          recommendnum: "3",
          date: "12-04",
          time: "21:20"
        },
        userinfo2: {
          userimg: require("@/assets/书城/用户头像_u2484.png"),
          username: "西瓜",
          usertext:
            "我们知道自己在重复相同的痛苦，只是愈来愈深，但可知无数次的重复也让痛苦变得可笑？重复人类生命吗？",
          goodnum: "330",
          recommendnum: "3",
          date: "12-04",
          time: "21:20"
        },
        userinfo3: {
          userimg: require("@/assets/书城/用户头像_u2484.png"),
          username: "西瓜",
          usertext:
            "我们知道自己在重复相同的痛苦，只是愈来愈深，但可知无数次的重复也让痛苦变得可笑？重复人类生命吗？",
          goodnum: "330",
          recommendnum: "3",
          date: "12-04",
          time: "21:20"
        }
      }
    };
  },
  methods: {
    addgood(e) {
    const good=e.target
      good.classList.add('redgood')
    },
    gologin() {},
    changered() {
      if (this.isred == false) {
        this.isred = true;
      } else {
        this.isred = false;
      }
    }
  }
};
</script>

<style lang="less" scoped>
#main {
  ul {
    list-style: none;
    li {
      padding: 0 1.5rem;
      padding-top: 1rem;
      overflow: hidden;
      .headimg,
      .userinfo {
        float: left;
      }
      .userinfo {
        margin-left: 1rem;
        .uesrname {
          padding-top: .5rem;
          font-family: "PingFangSC-Medium", "PingFang SC Medium", "PingFang SC";
          font-weight: 500;
          font-style: normal;
          font-size: 1.4rem;
          text-align: left;
          line-height: 2.2rem;
          margin-bottom: .5rem;
        }
        .usertext {
          width: 28.8rem;
          height: 3.3rem;
          font-family: "PingFangSC-Regular", "PingFang SC";
          font-weight: 400;
          font-style: normal;
          font-size: 1.2rem;
          color: #999999;
          text-align: left;
          margin-bottom: 1rem;
        }
        .viewthings {
          overflow: hidden;
          .date-and-time {
            float: left;
            font-family: "PingFangSC-Regular", "PingFang SC";
            font-weight: 400;
            font-style: normal;
            font-size: 1.2rem;
            color: #999999;
            text-align: left;
            line-height: 2rem;
          }
          div {
            float: right;
            font-size: 1.2rem;
            text-align: center;
            position: relative;
            .goodimg {
              width: 1.8rem;
              height: 1.8rem;
              background: url("@/assets/书城/u2490.png") no-repeat;
              position: absolute;
              left: -1.8rem;
              top: -0.2rem;
            }
            .redgood {
              background: url("@/assets/书城/u2491.png") no-repeat;
            }
            .addgoodbtn {
              position: fixed;
              left: 6.2rem;
              top: 39rem;
              font-family: arial;
              font-size: 1.2rem;
              text-align: left;
              border: .1rem solid #aaa;
              background: #fff none repeat scroll 0% 0%;
              border-radius: .3rem;
              white-space: nowrap;
              padding: .5rem .8rem;
              p {
                &:nth-of-type(1) {
                  margin-bottom: .2rem;
                }
              }
            }
            
            span {
              float: left;
              margin-left: .5rem;
              color: #999999;
              &:nth-of-type(1) {
                margin-right: 1rem;
              }
            }
            .rednum {
              color: red;
            }
            img {
              float: left;
              margin-left: .5rem;
            }
          }
        }
      }
    }
  }
  .bottombox {
    height: 5.1rem;
  }
}
</style>